// user account pages
@import 'layout_variables';
@import '_variables';

body.caerp {
	.expense_totals {
		background: var(--message-info-background-color);
		margin: var(--padding-m) 0;
		padding: var(--padding-s);

		>div {
			display: flex;
			justify-content: flex-start;

			.layout.flex {
				width: 12em;

				>div:nth-child(2n + 1) p {
					padding-top: 2px;
				}

				>div:nth-child(2n) p {
					text-align: right;
				}
			}
		}
	}

	.modal_view {
		.select {

			label,
			select {
				width: 100%;
			}
		}

		// .select2-container {
			// max-width: unset; supprimé parce que les select2 avec des libellés longs dépassent de la grille d’ajout de notes de dépenses
		// }
	}

	.flex {
		.btn-group {
			flex: 0 0 auto;
			padding-left: var(--padding-s);
		}
	}

	.add_km_expense {
		>div {
			padding-bottom: var(--padding-m);
		}
	}

	.main_toolbar .js_actions {
		.resume {
			align-self: center;
			flex: 1 1 auto;
			justify-content: center;

			>div {
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				padding: 0 var(--padding-s);

				label.btn {
					margin: 0;
				}

				label:not(.btn) {
					font-size: .825em;
					padding: var(--padding-s);
				}

				.toggle-buttons {
					padding: 0;
				}
			}
		}
	}

	.main_toolbar .main_actions {
		.more_actions {
			flex: 1 1 auto;

			>div {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				min-width: 11.25rem;
				padding: 0 2px;

				>div {
					>label {
						display: block;
						font-size: .875rem;
						padding-bottom: var(--padding-s);
						text-align: center;
					}

					>.btn,
					>.btn-container {
						margin-right: 5px;
					}

					&:last-child {
						align-items: center;

						>label {
							display: inline;
							padding: 0 0 0 var(--padding-m);
						}
					}

					&:only-child .btn,
					&:only-child .btn-container {
						margin-right: 0;
					}
				}
			}
		}
	}

	&[class*="supplier_orders"] {
		.two_cols .totals.form-section {
			justify-content: flex-start;
		}

		.main_toolbar .main_actions {
			.more_actions>div {
				justify-content: flex-end;
			}
		}
	}
}

@media (max-width: $wideWidth ) {
	body.caerp {
		.main_toolbar .js_actions {
			.resume {
				flex-basis: 15em;
			}
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp {
		.main_toolbar .main_actions {
			flex-wrap: nowrap;

			.more_actions {
				flex: 0 1 auto;
				padding: 0 var(--padding-s);

				>div {
					justify-content: flex-start;
				}
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp {
		.totals.form-section .flex.two_cols {
			>div {
				width: 50%;
			}
		}

		.main_toolbar .main_actions {
			flex-wrap: wrap;
			justify-content: flex-start;

			.resume {
				flex-basis: auto;
			}

			.more_actions {
				flex: 0 1 auto;
				margin: 0 5px;

				&:first-child {
					margin: 0 -2px;
				}

				>div {
					justify-content: flex-start;
				}
			}

			>div {
				margin-right: 5px;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}